<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue Demo ToDo</title>
    <link rel="stylesheet" type="text/css" href="css.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
    <div id='todo'>
        <div class="title">
            <span>今日待办</span>
        </div>
        <div class="border">
            <div class="add-item">
                <input ref='maininputfoucs' :autofocus='true' placeholder='添加...' 
                    @keydown.enter='add_item(content)' v-model='content' />
                <button title="按Enter键添加" @click='add_item'>添加</button>
            </div>
            <div class="section-line todo-task">{{ todo_task }}</div>
            <todo-item v-for='(item,index) in items' @change-item='changeItem' ref='focus' @delete-item='deleteItem'
                @reset-item='resetItem' :key='item.key' :index='index' :content='item.content' :checked='item.done'>
            </todo-item>
            <div v-if='done.length' class="section-line">已完成 ({{ done.length }})</div>
            <todo-item v-for='(item,index) in done' @change-item='changeItem' @delete-item='deleteItem'
                @reset-item='resetItem' :key='item.key' :index='index' :content='item.content' :checked='item.done'>
            </todo-item>
            <div v-if='trash_show'>
                <div @click='trash_show=!trash_show' title='点击隐藏' class="section-line trash-cursor">回收站 ({{ trash.length }}) 只保存最近20个记录</div>
                <todo-item v-for='(item,index) in trash' :del='item.del' @go-back='goBack' @final-delete='finalDelete'
                    :key='item.key' :index='index' :content='item.content' :checked='item.done'>
                </todo-item>
            </div>
            <div class="background-lines"></div>
        </div>
        <div class="footer"><a @click='trash_show_switch'>回收站</a>&nbsp<a @click='clearDatabase'>清空记录</a>&nbsp<a target="_blank" href='../index.html'>反馈</a></div>
    </div>
    <script src="vue3.js"></script>
    <script src="js.js"></script>
</body>

</html>